<template>
  <a-modal class="component-form" v-model:visible="visible" :title="title" @ok="handleOk" :maskClosable="false">
    <a-form :model="formState" :rules="formRules" layout="vertical" ref="form">
      <a-form-item label="组件名称" name="componentName">
        <a-input v-model:value="formState.componentName" :disabled="disabled" placeholder="组件名称" />
      </a-form-item>

      <a-form-item label="组件编号" name="componentCode">
        <a-input v-model:value="formState.componentCode" :disabled="disabled" placeholder="组件编号" />
      </a-form-item>
      <a-form-item label="组件类型" name="componentType">
        <a-radio-group v-model:value="formState.componentType" button-style="solid" :disabled="disabled">
          <a-radio-button v-for="item in componentTypeArr" :key="item.key" :value="item.key">
            {{ item.name }}
          </a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="适配母版" name="parentComponentIds">
        <a-select
          :disabled="disabled"
          :value="formState.parentComponentIds"
          @change="selectChange"
          :options="options"
          :fieldNames="{ label: 'templateName', value: 'id' }"
          mode="multiple"
          maxTagCount="responsive"
          placeholder="请选择母版"
        ></a-select>
      </a-form-item>

      <a-form-item label="预览图" name="componentOriginalPath">
        <ImageSubmit @getImg="getImg" ref="imageRef" :disabled="disabled" :photoList="photoList"></ImageSubmit>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button key="back" @click="hide">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk" v-if="!disabled">确认</a-button>
    </template>
  </a-modal>
</template>

<script>
/**
 * 组件表单 弹框
 * @author 朱琦
 * @date   时间：2023/1/12
 */
import ImageSubmit from '@/components/ImageSubmit.vue'
import motherboardApi from '@/api/management/motherboard'

export default {
  name: 'ComponentForm',
  props: {
    disabled: {
      type: Boolean,
      default: true
    }
  },
  components: { ImageSubmit },
  data() {
    return {
      visible: false,
      isAdd: false,
      formState: {
        componentName: null,
        componentOriginalPath: '',
        componentParams: '',
        componentCode: null,
        componentGridSize: 24
      },
      formRules: {
        componentName: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
        componentCode: [{ required: true, message: '请输入组件编号', trigger: 'blur' }],
        parentComponentIds: [{ required: true, message: '请选择适配母版', trigger: 'blur' }],
        componentType: [{ required: true, message: '请选择组件类型', trigger: 'blur' }]
      },
      options: [],
      componentTypeArr: [
        { key: 1, name: '业务' },
        { key: 2, name: '详情' }
      ],
      photoList: []
    }
  },
  computed: {
    title() {
      const text = this.isAdd ? '新增' : '编辑'
      return text + '组件'
    }
  },
  created() {},
  mounted() {},
  methods: {
    selectChange(ids, selected) {
      this.formState.parentComponentIds = ids
      this.formState.parentComponentList = (selected || []).map(i => ({ parentTemplateId: i.id }))
    },
    /**
     * 获取母版列表
     */
    getTemplateOption() {
      motherboardApi
        .getMotherboardList({})
        .then(res => {
          this.options = res.data || []
        })
        .catch(() => {
          this.$message.error('获取母版失败')
          this.options = []
        })
    },
    /**
     *  获取图片
     */
    getImg(file, url) {
      file.append('type', 'component') // parent-template:母版图片, component:组件
      motherboardApi
        .uploadImage(file)
        .then(async res => {
          if (res.detail) {
            this.$refs.imageRef.fileList = [
              {
                name: '',
                status: 'done',
                url: url
              }
            ]
            this.formState.componentOriginalPath = res.detail
          }
        })
        .catch(() => {
          this.$message.error('图片上传失败')
          this.$refs.imageRef.fileList = []
        })
    },

    /**
     * 点击确定
     */
    handleOk() {
      this.$refs.form.validate().then(res => {
        this.$emit('submit', { ...this.formState }, this.isAdd)
      })
    },
    /**
     * 显示弹框
     * @param {Boolean} isAdd 是否是新增
     * @param {Object} data 修改时的数据
     */
    show(isAdd = true, data) {
      this.getTemplateOption()
      this.formState = this.$options.data().formState
      this.photoList = []
      this.visible = true
      this.isAdd = isAdd
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        !isAdd && this.setData(data)
      })
    },
    /**
     * 关闭弹框
     */
    hide() {
      this.visible = false
      this.formState = this.$options.data().formState
    },
    /**
     * 设置表单数据
     * @param {Object} data
     */
    setData(data) {
      data.componentOriginalPath &&
        (this.photoList = [
          {
            name: '',
            status: 'done',
            url: data.componentOriginalPath
          }
        ])
      this.formState = {
        ...data,
        parentComponentIds: (data.parentComponentList || []).map(i => i.parentTemplateId),
        componentOriginalPath: null
      }
    }
  }
}
</script>

<style scoped lang="less">
.component-form {
}
</style>
